<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css" />
    <script type="text/javascript" src="../../lib/aircity/ac_conf.js"></script>
    <script type="text/javascript" src="../../lib/aircity/ac.min.js"></script>
    <script type="text/javascript" src="../../lib/vue3.js"></script>
  </head>
  <body>
    <div id="app">
      <div id="player" style="height: 100%"></div>
      <div class="control">
        <div class="top">
          <div>方量分析</div>
        </div>
        <div class="params">
          <div class="title">参数设置</div>
          <div class="item">
            <div class="label">高度</div>
            <div class="content">
              <input type="number" v-model="options.height" :step="10" :min="0" />
              m
            </div>
          </div>

          <div class="item">
            <div class="label">网格尺寸</div>
            <div class="content">
              <input type="number" v-model="options.gridSize" :step="1" :min="0" />
              m
            </div>
          </div>

          <div class="item">
            <div class="label">网格</div>
            <div class="content">
              <div class="flex-box">
                <input type="number" v-model="options.gridLineThickness" :step="1" :min="0" style="width: 50px" />
                像素
              </div>
              <input type="color" v-model="options.gridColor" />
            </div>
          </div>

          <div class="item">
            <div class="label">线宽</div>
            <div class="content">
              <input type="number" v-model="options.lineThickness" :step="1" :min="0" />
              像素
            </div>
          </div>

          <div class="item">
            <div class="label">端点大小</div>
            <div class="content">
              <input type="number" v-model="options.pointSize" :step="1" :min="0" />
              像素
            </div>
          </div>

          <div class="item">
            <div class="label">挖方颜色</div>
            <div class="content">
              <input type="color" v-model="options.cutLineColor" style="width: 100%" />
            </div>
          </div>
          <div class="item">
            <div class="label">填方颜色</div>
            <div class="content">
              <input type="color" v-model="options.fillLineColor" style="width: 100%" />
            </div>
          </div>
          <div class="item">
            <div class="label">挖方端点</div>
            <div class="content">
              <input type="color" v-model="options.cutPointColor" style="width: 100%" />
            </div>
          </div>
          <div class="item">
            <div class="label">填方端点</div>
            <div class="content">
              <input type="color" v-model="options.fillPointColor" style="width: 100%" />
            </div>
          </div>

          <div class="button-box">
            <button @click="start()">开始方量分析</button>
          </div>

          <div class="button-box">
            <button @click="stop()" class="sunlight stop">停止方量分析</button>
          </div>
        </div>
      </div>
    </div>

    <script type="text/javascript">
      const { createApp, reactive, watch } = Vue

      const vueComposition = {
        setup() {
          // 方量分析 代码块
          const options = reactive({
            height: 130, //高度 米
            gridSize: 20, //网格大小
            lineThickness: 1, //宽度
            pointSize: 5, //点的大小
            gridLineThickness: 1, //网格线的宽度
            cutLineColor: '#ff0000', //挖方线的颜色
            fillLineColor: '#00bc00', //填方线的颜色
            cutPointColor: '#000000', //挖方点的颜色
            fillPointColor: '#0100ff', //填方点的颜色
            gridColor: '#ffff00' //网格线的颜色
          })

          // 开始方量分析
          const start = () => {
            const o = JSON.parse(JSON.stringify(options))
            // 开启分析
            __g.tools.startCutFillAnalysis(o)
          }

          // 停止方量分析
          const stop = () => {
            // 关闭分析
            __g.tools.stopCutFillAnalysis()
          }

          return {
            options,
            start,
            stop
          }
        }
      }

      const app = createApp(vueComposition).mount('#app')

      const OnLoad = () => {
        const __DigitalTwinPlayer = new DigitalTwinPlayer(HostConfig.Player, { domId: 'player' })
      }

      //自适应分辨率
      const onResize = async () => {
        let playerView = document.getElementById('player')
        playerView.style.height = window.innerHeight + 'px'
        playerView.style.width = window.innerWidth + 'px'
      }

      window.addEventListener('load', OnLoad, true)
      window.addEventListener('resize', onResize, true)

      //页面离开事件(离开时清除此页面的操作及重置场景)
      window.onunload = function (e) {
        __g.tools.stopCutFillAnalysis()
        // 重置场景
        __g.reset()
      }
    </script>
  </body>
</html>
